<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="./css/aui.css" />    
    <link rel="stylesheet" type="text/css" href="./css/aui-slide.css" />
    <link rel="stylesheet" type="text/css" href="./css/font-awesome.css" />
    <link rel="stylesheet" type="text/css" href="./css/style.css" />
    <script type="text/javascript" src="./script/jquery.min.js"></script>
    <script type="text/javascript" src="./script/doT.min.js"></script>
    <script type="text/javascript" src="./script/base.js"></script>
    <script type="text/javascript" src="./script/api.js"></script></head>
    <script type="text/javascript" src="./script/jquery-3.2.0.js"></script>
</head>
<body>
    <header class="header header-f" style="padding-top:2rem; height:4rem;">
        <div class="header-l aui-pull-left" onclick="closeWin()">
            <i class="fa fa-angle-left"></i>
        </div>
        <div class="header-title">
            售后
        </div>
        <div class="header-r aui-pull-right">
        </div>
    </header>
    <div style="height:4rem;"></div>

    <div class="order-refund-t">订单号：2343686789879</div>
    <div class="order-refund-1">
        <div class="order-refund-btn-1" onclick="chooseRefund('onlyRefund');" id="onlyRefund">仅退款</div>
        <div class="order-refund-btn-2" onclick="chooseRefund('refundGoods');" id="refundGoods">退款退货</div>
    </div>
    <div class="my-bag-d-t">
        <div class="my-bag-d-t-l"></div>
        <span>退款原因</span>
    </div>
    <div class="order-refund-list">
        <div onclick="chooseReason('1')" id="1">外观/参数等与描述不符</div>
        <div onclick="chooseReason('2')" id="2">商品发错货</div>
        <div onclick="chooseReason('3')" id="3">产品质量/故障</div>
        <div onclick="chooseReason('4')" id="4">效果不好或不喜欢</div>
        <div onclick="chooseReason('5')" id="5">收到商品少件/破损/污渍</div>
        <div onclick="chooseReason('6')" id="6">假冒商品</div>
        <div onclick="chooseReason('7')" id="7">其他</div>
    </div>

    <div class="my-bag-d-t">
        <div class="my-bag-d-t-l"></div>
        <span>退款金额 <i>(最高1599)</i></span>
    </div>
    <div class="order-refund-list">
        <input type="number" id="money">
    </div>

    <div class="my-bag-d-t">
        <div class="my-bag-d-t-l"></div>
        <span>问题描述</span>
    </div>
    <textarea class="order-refund-content" name="" id="content" placeholder-class="ph" placeholder="填写内容"></textarea>

    <div class="my-bag-d-t" style="margin-top:0.5rem;">
        <div class="my-bag-d-t-l"></div>
        <span>上传凭证</span>
    </div>
    <div class="evaluate">
        <div class="evaluate-d">
            <ul>
                <li><img src="images/f1.jpg"></li>
                <li><img src="images/f1.jpg"></li>
                <li><img src="images/f1.jpg"></li>
                <li><img src="images/f1.jpg"></li>
                <li><img src="images/f1.jpg"></li>
            </ul>
            <div class="evaluate-d-d"></div>
        </div>
    </div>
    <div class="my-data-btn-t" onclick="choosePic();"></div>
    <button class="my-data-btn" onclick="handleRefund();">提交申请</button>


</body>
<script type="text/javascript" src="./script/api.js"></script>
<script type="text/javascript">

    apiready = function(){
        cause = '外观/参数等与描述不符';
        goods_no = api.pageParam.goods_no;
        images = new Array();
        alert(goods_no)
        // $('#onlyRefund').addClass('order-refund-btn-1');
        $('#1').addClass('active');
    }
    
    // 提交退款
    function handleRefund(){
        var content = $api.byId('content').value;
        var money = $api.byId('money').value;

        var userid = $api.getStorage('userid');
        var authtoken = $api.getStorage('authtoken');
        api.ajax({
            url: webAddress + '/a/order/Refund/push',
            method: 'POST',
            data: {
                values: {
                    id: goods_no,
                    cause: cause,
                    content: content,
                    money: money,
                    images: images,
                },
            },
            headers: {
                TOKEN: token,
                authuid: userid,
                authtoken: authtoken,
                'Content-Type': 'multipart/form-data',
            },
        },function(ret, err){
            if (ret) {
                alert( JSON.stringify( ret ) );
                api.toast({
                    msg: ret.body.message,
                    duration: 2000,
                    location: 'bottom'
                });
            } else {
                alert( JSON.stringify( err ) );
                api.toast({
                    msg: err.body.message,
                    duration: 2000,
                    location: 'bottom'
                });
                return false;
            }
        });
    }

    // 选择图片
    function choosePic(){
        api.actionSheet({
            // title: '底部弹出框测试',
            cancelTitle: '取消',
            // destructiveTitle: '红色警告按钮',
            buttons: ['拍照', '从手机上传照片']
        }, function(ret, err) {
            var index = ret.buttonIndex;
            if (index == 1) {
                //拍照
                takePicture('camera');
            } else if (index == 2) {
                //从手机上传
                takePicture('library');
            }
        });
    }

    // 选择图片
    function takePicture(sourceType){
        alert(sourceType);
        api.getPicture({
            sourceType: sourceType,
            encodingType: 'jpg',
            mediaValue: 'pic',
            destinationType: 'url',
            allowEdit: true,
            quality: 50,
            targetWidth: 100,
            targetHeight: 100,
            saveToPhotoAlbum: false,
        }, function(ret, err) {
            if (ret) {
               // alert(JSON.stringify(ret));
               var filePath = ret.data;
               uploadPic(filePath);
           } else {
            alert(JSON.stringify(err));
        }
    });
    }

    // 上传图片
    function uploadPic(filePath){
        if (filePath == '') {
            return false;
        }
        alert(filePath);

        var userid = $api.getStorage('userid');
        var authtoken = $api.getStorage('authtoken');
        api.ajax({
            url: webAddress + '/a/member/Member/upload',
            method: 'POST',
            data: {
                values: {
                    files: filePath,
                },
            },
            headers: {
                TOKEN: token,
                authuid: userid,
                authtoken: authtoken,
                // 'Content-Type': 'application/x-www-form-urlencoded',
                'Content-Type': 'multipart/form-data',
            },
        },function(ret, err){
            if (ret) {
                alert( JSON.stringify( ret ) );
                // var data = ret.result.data;
                // for (var i = 0; i < data.length; i++) {
                //     data[i].start_time = toDate(data[i].start_time);
                //     data[i].end_time = toDate(data[i].end_time);
                // }
                // templateFun(data);
            } else {
                // alert( JSON.stringify( err ) );
                api.toast({
                    msg: err.body.message,
                    duration: 2000,
                    location: 'bottom'
                });
                return false;
            }
        });
    }

    // 原因选择
    function chooseReason(sort){
        $('.order-refund-list div').removeClass('active');
        $('#'+sort).addClass('active');

        if (sort == 1) {
            cause = '外观/参数等与描述不符';
        }else if(sort == 2) {
            cause = '商品发错货';

        }else if(sort == 3){
            cause = '产品质量/故障';

        }else if(sort == 4){
            cause = '效果不好或不喜欢';

        }else if(sort == 5){
            cause = '收到商品少件/破损/污渍';

        }else if(sort == 6){
            cause = '假冒商品';

        }else{
            cause = '其他';
        }
    }

    // 退款方式 1.仅退款 2.退款退货
    function chooseRefund(refundSort){
        $('.order-refund-1 div').removeClass('order-refund-btn-1');
        $('.order-refund-1 div').addClass('order-refund-btn-2');
        $('#'+refundSort).addClass('order-refund-btn-1');
    }

    function openClub(){
        var delay = 0;
        if(api.systemType != 'ios'){
            delay = 300;
        }
        api.openWin({
            name: 'club_win',
            url: './html/club_win.html',
            bounces:false,
            delay: delay,
            slidBackEnabled:true,
            vScrollBarEnabled:false,
            progress:{
                type:"page"
            }
        });
    }
    function closeWin(){
        api.closeWin({
        });
    }
</script>
</html>